<template>
	<div>
		<MakeHeader />
		<div class="make-text" @click="cancelType">
			<div class="text-hongtou">
				<span><i>*</i>红头：</span>
				<input type="text" v-model="htContent" @focus="htFocus" @blur="htBlur" maxlength="20"/>
				<p v-if="htNotice">最多可输入20个汉字</p>
				<em v-if="noHongtou"><i></i>请输入红头标题</em>
			</div>
			<div class="text-type">
				<span>文章类型：</span>
				<div class="report-type-right">
					<div class="report-type-all" @click="clickType($event)">
						<p>{{typeContent}}</p>
						<i></i>
					</div>
					<div class="report-type-select" v-if="isType">
						<ul>
							<li @click="clickSelect($event)">军事</li>
							<li @click="clickSelect($event)">政治</li>
							<li @click="clickSelect($event)">体育</li>
							<li @click="clickSelect($event)">科技</li>
							<li @click="clickSelect($event)">教育</li>
							<li @click="clickSelect($event)">人文</li>
							<li @click="clickSelect($event)">自然</li>
							<li @click="clickSelect($event)">航空</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="text-list">
				<span>简报列表：</span>
				<div class="text-list-title">
					<ul>
						<li><i @click="selectTitle($event)" value="false"></i>文章标题1</li>
						<li><i @click="selectTitle($event)" value="false"></i>文章标题2</li>
						<li><i @click="selectTitle($event)" value="false"></i>文章标题3</li>
						<li><i @click="selectTitle($event)" value="false"></i>文章标题4</li>
						<li><i @click="selectTitle($event)" value="false"></i>文章标题5</li>
						<li><i @click="selectTitle($event)" value="false"></i>文章标题6</li>
					</ul>
				</div>
				<a href="javascript:;" class="list-add" @click="addTitle($event)">+添加</a>
			</div>
			<div class="text-content">
				<span><i>*</i>内容：</span>
				<div class="text-fuwenben">
					<UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
					<!--<img src="../../../assets/public/rich.png" alt="" />-->
				</div>
			</div>
			<div class="text-submit">
				<router-link to="/index/knowledge/report">发表</router-link>
				<router-link :to="{'name':'makePreview'}" @click.native='getUEContent($event)' target="_blank">预览</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	// 引入头部
	import MakeHeader from '@/components/header'
	// 引入jquery
	import $ from 'jquery'
	// 引入富文本组件
	import UE from '@/components/public/richText'
	export default {
		components: {
			MakeHeader,
			UE
		},
		data () {
			return {
				noHongtou: false, // 未填写红头时提示
				htNotice: true, // 红头输入框提示
				htContent: '', // 红头的内容
				isType: false, // 类型下拉框是否显示
				typeContent: '军事', // 类型默认值
				defaultMsg: '', // 富文本初始输入内容
		        config: { // 富文本样式
		          initialFrameWidth: null,
		          initialFrameHeight: 350
		        }
			}
		},
		methods: {
			// 红头输入框获取焦点
			htFocus () {
				var that = this
				that.htNotice = false
				that.noHongtou = false
			},
			// 红头输入框失去焦点
			htBlur () {
				var that = this
				if (that.htContent) {
					that.htNotice = false
					that.noHongtou = false
				} else {
					that.htNotice = true
					that.noHongtou = true
				}
			},
			// 文章类型点击出现文章的下拉框
			clickType (e) {
				var eve = e || window.event
				if(eve.stopPropagation){
					eve.stopPropagation()
				}else{
					eve.cancelBubble = true
				}
	  			var that = this
	  			that.isType = !that.isType
			},
			// 点击其他关闭文章类型的下拉框
			cancelType () {
				var that = this
  				that.isType = false
			},
			// 文章类型选择
			clickSelect (e) {
				var eve = e || window.event
				this.typeContent = eve.target.innerHTML
			},
			// 简报列表，文章标题选择
			selectTitle (e) {
				var eve = e || window.event
				var that = this
				var $eve = $(eve.target)
				var temp = !$eve.val()
				$eve.val(temp)
				if ($eve.val()) {
					$eve.addClass("isChecked")
				} else {
					$eve.removeClass("isChecked")
				}
			},
			// 列表添加
			addTitle (e) {
				var eve = e || window.event
				var $eve = $(eve.target)
				var listStr = ''
				var liList = [...$eve.prev().find('li')]
				for (var i in liList) {
					var iClass = $(liList[i]).children('i').attr('class')
					if (iClass) {
						listStr += liList[i].innerText+"<br/>"
						this.defaultMsg = listStr
					}
				}
			},
			// 点击获取获取富文本的内容
			getUEContent(e) {
				var that = this
				that.config.initialFrameWidth = 0
		        that.config.initialFrameHeight = 0
		        let content = this.$refs.ue.getUEContent();
//			    this.$notify({
//			      title: '获取成功，可在控制台查看！',
//			      message: content,
//			      type: 'success'
//			    });
		    }
		}
	}
</script>

<style scoped>
 @import '../../../../static/makeReport/makeText.css';
</style>